<template>
  <el-card v-loading="fileListMinLoading" class="box-card box-card-list">
    <div slot="header" class="clearfix">
      <div class="temHeader">
        <span class="temIcon" />
        <span class="area-header-title" @click="init">{{ $t('模板') }}</span>
      </div>
    </div>
    <div v-for="file in fileList" :key="file.id" class="template showFileName">
      <div class="lt showFileName" style=" width: 85%;">
        <span class="link-type" @click="onlinePreview(file.id)">{{ file.name }}</span>
      </div>
      <div v-if="configDownloadEnabled" class="rt">
        <el-button icon="el-icon-download" type="text" style="font-size: 13px;" @click="DownloadFile(file.id)">{{ $t('下载') }}</el-button>
      </div>
    </div>
    <div v-if="fileList !== null && fileList !== undefined && fileList.length > 0">
      <el-pagination
        v-show="total>0"
        small
        :page-size="5"
        :pager-count="5"
        layout="prev, pager, next"
        :total="total"
        @current-change="handleCurrentChange"
      />
    </div>
    <div v-else class="noneData">
      <div>
        <svg-icon icon-class="none" class-name="none-icon" />
        <p>{{ $t('暂无数据') }}</p>
      </div>
    </div>
    <OnlinePreview ref="OnlinePreview" />
  </el-card>
</template>
<script>
  import { getFilesByBusinessType } from '@/api/file/filefolder/folder.js'
  import { downLoadFileOpen } from '@/utils/zipdownload'
  export default {
    props: {
      businessType: {
        type: String,
        default: () => ''
      }
    },
    data() {
      return {
        fileListMinLoading: false,
        total: 0,
        queryParams: {
          pageNum: 1,
          pageSize: 5,
          businessName: ''
        },
        fileList: undefined,
        pageGotoType: true,
        configDownloadEnabled: true
      }
    },
    created() {
      // 全局下载开关
      this.getConfigKeyToDownload('enable_download').then(response => {
        this.configDownloadEnabled = (response.msg === 'true')
      })
    },
    methods: {
      handleCurrentChange(val) {
        this.queryParams.pageNum = val
        this.init()
      },
      init() {
        this.pageGotoType = true
        this.fileListMinLoading = true
        this.queryParams.dataType = this.businessType
        getFilesByBusinessType(this.queryParams).then(response => {
          if (response.rows.length >= 1) {
            this.fileList = response.rows
            this.total = response.total
          }
          this.fileListMinLoading = false
        })
      },
      // 预览附件
      onlinePreview(id) {
        this.$refs.OnlinePreview.onlinePreviewFile(id)
      },
      DownloadFile(id) {
        downLoadFileOpen(id)
      },
      pageGoToInput() {
        if (this.pageGotoType) {
          this.pageGotoType = false
        }
      }
    }
  }
</script>
<style scoped>
  .showFileName{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
</style>
